<template>
  <div>
    <v-card flat class="mb-4">
      <v-card-title class="text-[#413E3A] font-bold text-base pb-2 border-b">
        CATEGORY
      </v-card-title>
      <v-card-text class="pt-3">
        <v-checkbox label="All" class="mb-2" />
        <v-checkbox label="Rims Only" class="mb-2" color="#413E3A" checked />
      </v-card-text>
    </v-card>

    <v-card flat class="mb-4">
      <v-card-title class="text-[#413E3A] font-bold text-base pb-2 border-b">
        SIZE
      </v-card-title>
      <v-card-text class="pt-3">
        <v-checkbox label="29" class="mb-2" checked />
      </v-card-text>
    </v-card>

    <v-row class="mt-4">
      <v-col cols="6">
        <v-btn text color="#999" class="w-full">Reset Filters</v-btn>
      </v-col>
      <v-col cols="6">
        <v-btn class="bg-[#413E3A] text-white w-full">Apply Filters</v-btn>
      </v-col>
    </v-row>
  </div>
</template>

<script setup>
import { ref } from "vue";

const showFilters = ref(false);
</script>
